<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div class="general-options-panel" fxLayout="column">
    <div class="general-options-header"><span>Schema</span></div>
    <sp-ep-settings-section
        sectionTitle="Field runtime name"
        sectionDescription="Identifies the field in the underlying runtime format"
    >
        <div
            attr.id="input-runtime-name-{{ cachedProperty.label }}"
            fxFlex="100"
        >
            <mat-form-field class="w-100" color="accent">
                <mat-label>Field runtime name</mat-label>
                <input
                    matInput
                    placeholder="RuntimeName"
                    name="runtimename"
                    id="runtimename"
                    data-cy="connect-edit-field-runtime-name"
                    (blur)="triggerTutorialStep()"
                    [(ngModel)]="cachedProperty.runtimeName"
                />
            </mat-form-field>
        </div>
    </sp-ep-settings-section>

    <sp-ep-settings-section
        sectionTitle="Field semantic type"
        sectionDescription="Identifies field semantics, e.g., oil temperature"
        fxLayout="column"
        fxFlex="100"
        *ngIf="isPrimitiveProperty"
    >
        <div fxFlex="100" fxLayout="column" style="margin-bottom: 5px">
            <mat-checkbox
                name="timestampCheckbox"
                (change)="editTimestampDomainProperty($event.checked)"
                [checked]="isTimestampProperty"
                color="accent"
                data-cy="sp-mark-as-timestamp"
            >
                Mark as timestamp
            </mat-checkbox>
        </div>
        <div *ngIf="isPrimitiveProperty" fxFlex="100" fxLayout="column">
            <mat-form-field class="w-100" color="accent" fxFlex="100">
                <input
                    matInput
                    placeholder="Semantic Type"
                    class="dmainProperty"
                    name="domainproperty"
                    id="domainproperty"
                    [(ngModel)]="cachedProperty.semanticType"
                    [matAutocomplete]="st"
                    [disabled]="isTimestampProperty"
                    [matAutocompleteDisabled]="isTimestampProperty"
                    [formControl]="domainPropertyControl"
                />
                <mat-autocomplete #st="matAutocomplete" [panelWidth]="'400px'">
                    <mat-option
                        *ngFor="let semanticType of semanticTypes | async"
                        [value]="semanticType"
                        style="font-size: 10pt"
                        [matTooltip]="semanticType"
                    >
                        {{ semanticType }}
                    </mat-option>
                </mat-autocomplete>
            </mat-form-field>
        </div>
    </sp-ep-settings-section>

    <sp-ep-settings-section
        sectionTitle="Field data type"
        sectionDescription="The data type of the field values"
        *ngIf="!isTimestampProperty && !isNestedProperty"
    >
        <div *ngIf="adapterIsInEditMode" class="warning-message">
            <p data-cy="warning-change-data-type" class="text-center">
                Changing the data type can result in pipelines no longer writing
                the data correctly to the data lake.
                <br />
                <br />
                To resolve this problem, you can:
                <br />
                - Rename the property.
                <br />
                - Truncate the old data.
                <br />
                - Write the data to a new measurement.
            </p>
        </div>
        <sp-edit-data-type
            [cachedProperty]="cachedProperty"
            (dataTypeChanged)="dataTypeChanged.emit($event)"
        >
        </sp-edit-data-type>
    </sp-ep-settings-section>
</div>
